<template>
  <div class="cloud">
    <div class="cloud-container">
      <div class="cloud-body">
        <div class="phone-container">
          <div class="phone-panel" v-for="list in lists">
            <div class="phone-header">
              <input class="phone-check" type="checkbox" v-model="list.isCheck">
              <span class="phone-name">{{list.name}}</span>
              <span class="phone-type">{{list.type}}</span>
            </div>
            <div class="phone-body">
              <img style="width:100%;height:100%;background:repeat" :src="list.img">
              <div class="phone-cover" @click="showPhoneDetail(list)"></div>
              <div class="phone-control">
                <div class="control-item">重启云机</div>
                <div class="control-item">停止运用</div>
                <div class="control-item">回收云机</div>
                <div class="control-item">故障修复</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cloud-header">
        <div class="dropdown">
          <div class="btn-add btn-design dropdown" data-toggle="dropdown" id="multi">
            <i class="icon icon-add"></i>
            增减云机
          </div>
          <ul class="dropdown-menu" role="menu" aria-labelledby="add">
            <li @click="addPhone($event)">
              <a>增加云机</a>
            </li>
            <li>
              <a>回收云机</a>
            </li>
            <li>
              <a>移动云机</a>
            </li>
          </ul>
        </div>
        <div class="btn-app btn-design" @click="appInstall()">
          <i class="icon icon-app"></i>应用安装/卸载
        </div>
        <div class="separate-line">|</div>
        <div class="btn-checkbox">
          <input class="check" type="checkbox" v-model="isCheckAll" @click="checkAll()">全选
        </div>
        <div class="dropdown">
          <div class="btn-multi btn-design dropdown" data-toggle="dropdown" id="multi">
            <i class="icon icon-triangle"></i>
            批量操作
          </div>
          <ul class="dropdown-menu" role="menu" aria-labelledby="multi">
            <li>
              <a>云机扫码</a>
            </li>
            <li>
              <a>启动应用</a>
            </li>
            <li>
              <a>停止应用</a>
            </li>
            <li>
              <a>重启云机</a>
            </li>
            <li>
              <a>一键HOME</a>
            </li>
            <li>
              <a>切换IP与定位</a>
            </li>
            <li>
              <a>关闭IP代理</a>
            </li>
            <li>
              <a>恢复出厂设置</a>
            </li>
          </ul>
        </div>
        <div class="btn-sync btn-design">
          <i class="icon icon-sync"></i>云机同步
        </div>
        <div class="separate-line">|</div>
        <div class="dropdown">
          <div class="btn-cut btn-design" id="cut" data-toggle="dropdown">
            <i class="icon icon-triangle"></i>
            截屏不刷新
          </div>
          <ul class="dropdown-menu" role="menu" aria-labelledby="cut">
            <li>
              <a>截屏不刷新</a>
            </li>
            <li>
              <a>间隔20秒刷新</a>
            </li>
            <li>
              <a>间隔10秒刷新</a>
            </li>
          </ul>
        </div>
        <div class="btn-refresh btn-design">
          <i class="icon icon-refresh"></i>
          刷新
        </div>
      </div>
      <div class="cloud-footer">
        <div class="footer-item">
          订购云机
          <span class="text-red">0</span>
        </div>
        <div class="footer-item">
          订购IP
          <span class="text-red">0</span>
        </div>
        <div class="footer-item">
          订购一键新机
          <span class="text-red">0</span>
        </div>
        <div class="footer-item">建议使用谷歌chrome 64及以上版本浏览器，safari浏览器下部分功能可能无法正常使用。</div>
      </div>
    </div>
    <AddGroupDialog v-if="addGroupDialog"></AddGroupDialog>
    <AppInstallDialog v-if="appInstallDialog"></AppInstallDialog>
  </div>
</template>

<script>
import AddGroupDialog from "./dialog/AddGroupDialog";
import AppInstallDialog from "./dialog/AppInstallDialog";
import AddPhoneDialog from "./dialog/AddPhoneDialog";
export default {
  components: {
    AddGroupDialog,
    AppInstallDialog,
    AddPhoneDialog
  },
  data() {
    return {
      phone: null,
      isCheckAll: false, //用于控制全选
      lists: [
        {
          id: 1,
          name: "11111",
          type: "标准版",
          img: require("../../static/img/lufi.jpg")
        },
        {
          id: 2,
          name: "22222",
          type: "标准版",
          img: require("../../static/img/suolo.jpg")
        },
        {
          id: 3,
          name: "33333",
          type: "标准版",
          img: require("../../static/img/sabo.jpeg")
        },
        {
          id: 4,
          name: "11111",
          type: "标准版",
          img: require("../../static/img/aisi.jpeg")
        },
        {
          id: 5,
          name: "22222",
          type: "标准版",
          img: require("../../static/img/haha.jpg")
        },
        {
          id: 6,
          name: "33333",
          type: "标准版",
          img: require("../../static/img/www.jpg")
        },
        {
          id: 7,
          name: "11111",
          type: "标准版",
          img: require("../../static/img/yezi.jpg")
        },
        {
          id: 8,
          name: "22222",
          type: "标准版",
          img: require("../../static/img/lufi.jpg")
        },
        {
          id: 9,
          name: "33333",
          type: "标准版",
          img: require("../../static/img/aisi.jpeg")
        },
        {
          id: 10,
          name: "11111",
          type: "标准版",
          img: require("../../static/img/sabo.jpeg")
        },
        {
          id: 11,
          name: "22222",
          type: "标准版",
          img: require("../../static/img/yezi.jpg")
        },
        {
          id: 12,
          name: "33333",
          type: "标准版",
          img: require("../../static/img/www.jpg")
        },
        {
          id: 13,
          name: "11111",
          type: "标准版",
          img: require("../../static/img/suolo.jpg")
        },
        {
          id: 14,
          name: "22222",
          type: "标准版",
          img: require("../../static/img/sabo.jpeg")
        },
        {
          id: 15,
          name: "33333",
          type: "标准版",
          img: require("../../static/img/haha.jpg")
        }
      ]
    };
  },
  created() {},
  methods: {
    //全选/全不选
    checkAll() {
      this.isCheckAll = !this.isCheckAll;
      if (this.isCheckAll) {
        _.forEach(this.lists, item => {
          item.isCheck = true;
        });
      } else {
        _.forEach(this.lists, item => {
          item.isCheck = false;
        });
      }
    },
    //显示手机详情
    showPhoneDetail(phone) {
      this.$store.commit("setPhone", {
        phone: phone
      });
      this.$store.commit("setDialogStatus", {
        dialog: "phoneDialog",
        isBoolean: true
      });
    },
    //显示应用安装
    appInstall() {
      this.$store.commit("setDialogStatus", {
        dialog: "appInstallDialog",
        isBoolean: true
      });
    },
    //显示增加云机
    addPhone(event) {
      event.stopPropagation();
      this.$store.commit("setDialogStatus", {
        dialog: "addPhoneDialog",
        isBoolean: true
      });
    }
  },
  computed: {
    addGroupDialog() {
      return this.$store.state.addGroupDialog;
    },
    appInstallDialog() {
      return this.$store.state.appInstallDialog;
    },
    addPhoneDialog() {
      return this.$store.state.addPhoneDialog;
    }
  }
};
</script>

<style lang="scss" scoped>
$white-light: #f5f6f7;
$white-hover: #fafbfc;
$gray-border: #c3c6c9;
.cloud {
  position: relative;
  width: 100%;
  height: 100%;
}
.cloud-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.cloud-header {
  position: absolute;
  top: 0;
  width: 100%;
  min-width: 620px;
  height: 50px;
  padding-top: 12px;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid $gray-border;
  .separate-line {
    margin-left: 12px;
  }
  .btn-design {
    position: relative;
    display: flex;
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 5px;
    background-color: $white-light;
    border: 1px solid $gray-border;
    &:hover {
      background-color: $white-hover;
    }
  }
  .btn-add,
  .btn-cut {
    margin-left: 12px;
  }
  .btn-app,
  .btn-multi,
  .btn-sync,
  .btn-refresh {
    margin-left: 10px;
  }
  .icon {
    line-height: 20px;
    margin-right: 2px;
    margin-left: 2px;
    &:before {
      font-size: 8px;
    }
  }
  .icon-add:before {
    content: "\e60c";
  }
  .icon-app:before {
    content: "\e64d";
  }
  .icon-triangle:before {
    content: "\e63f";
  }
  .icon-sync:before {
    content: "\e6a9";
  }
  .icon-refresh:before {
    content: "\e65e";
  }
  .btn-checkbox {
    display: flex;
    margin-left: 12px;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    .check {
      margin-top: 5px;
      cursor: pointer;
      margin-right: 2px;
      width: 15px;
      height: 15px;
    }
  }
}
.cloud-body {
  position: relative;
  margin-top: 50px;
  padding-bottom: 32px;
  box-sizing: border-box;
  overflow: auto;
}
.phone-container {
  padding: 10px;
}
.phone-panel {
  float: left;
  margin: 10px;
  width: 180px;
  height: 280px;
  box-shadow: 0px 0px 5px $gray-border;
  .phone-header {
    position: relative;
    display: flex;
    height: 34px;
    padding: 5px 10px;
    background-color: $white-light;
    .phone-check {
      cursor: pointer;
      margin-top: 4px;
      width: 16px;
      height: 16px;
    }
    .phone-name {
      margin-left: 10px;
    }
    .phone-type {
      position: absolute;
      right: 10px;
    }
  }
  .phone-body {
    position: relative;
    cursor: pointer;
    width: 180px;
    height: 246px;
    &:hover {
      .phone-cover {
        display: block;
      }
      .phone-control {
        display: block;
      }
    }
  }
}
.cloud-footer {
  position: absolute;
  display: flex;
  bottom: 0;
  width: 100%;
  background-color: $white-light;
  display: inline-block;
  .footer-item {
    font-size: 13px;
    text-align: center;
    padding: 5px 10px;
    display: inline-block;
    .text-red {
      font-size: 15px;
      color: red;
      font-weight: bold;
    }
  }
}
.dropdown-menu {
  background-color: $white-light;
  li {
    cursor: pointer;
    padding: 2px 10px;
    font-size: 13px;
    &:hover {
      background-color: $white-hover;
    }
  }
}
.phone-cover {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.phone-control {
  display: none;
  position: absolute;
  top: 5px;
  left: 5px;
  .control-item {
    margin-bottom: 5px;
    padding: 5px;
    font-size: 10px;
    display: block;
    background-color: $white-light;
    border-radius: 3px;
    &:hover {
      background-color: $white-hover;
    }
  }
}
</style>